<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: MSH
  Date: 2018-12-14
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户表</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <!--启用较验-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.js"></script>
     <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/zh_CN.js"></script>
    <!--sweet提示框-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/hplus/css/plugins/sweetalert/sweetalert.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>

</head>
<body>
<form action="#" id="myForm" class="form-horizontal">
    <div class="pull-left col-sm-9">
    <div class="pull-right col-sm-6">
        <div class="form-group col-sm-3">
            <button onclick="delRoom()" class="btn btn-primary"><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;删除</button>
        </div>
        <div class="form-group col-sm-3">
            <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
        </div>
    </div>
    </div>
</form>
<!--增加模态框-->
<div  class="modal inmodal" id="addmodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userform"  method="post" role="form">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4> 用户购买</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right">客户姓名</label>
                        <div class="col-sm-6" >
                            <select name="guests" id="guests"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="date" class="col-sm-4 text-right">时间：</label>
                        <div class="col-sm-6">
                            <div class="input-group" id="datetimepicker2">
                                <input name="date" id="date" type='date' class="form-control" />
                                <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-4 text-right" for="note" style="margin-left: -11px">咨询内容</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="note"   />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button onclick="doadd()" type="button" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>

               </form>
    </div>
</div>


 <div class="container">
     <table id="tb"></table>
 </div>

</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#tb").bootstrapTable({
            url:"${pageContext.request.contextPath}/Advisory/chaxun",
            toolbar:'#dtn',//工具按钮用哪个容器
            striped: true,//隔行换色
            showRefresh: true,//是否显示刷新按钮
            height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            showToggle:true,//是否显示详细视图和列表视图的切换按钮
            //detailView:true,//是否显示父子表
            pagination:true, //是否显示分页（*）
            pageSize : 4,//单页记录数
            pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
            /* sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
             queryParams: function (params) {
             var temp = {
                 limit : params.limit,
                 offset : params.offset
             }
             return temp;
             },*/
            columns:[{
                checkbox:true,
            },{
                field:'id',
                title:'编号'
            },{
              field:'guests1.name',
              title:'客户姓名'
        },{
                field:'date',
                title:'日期'
            },{
                field:'note',
                title:'咨询内容',
            },{
               title:'操作',
                title:'操作',
                formatter:function(value,row,index){
                    return "<button class='btn  btn-primary' onclick='toxiugai(("+index+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>"
                }
            }]
        })
    });
    //校验
$(function () {
    <!--校验框架-->
    $('#addmodal').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空！'
                    }
                }
            }
        }
    });
});

$(function(){
})


    //增加用户
    function doadd(){
        //
        //启用较验
        $('#addmodal').data('bootstrapValidator').validate();
        //验证是否通过true/false
        var flag = $('#addmodal').data('bootstrapValidator').isValid() ;
        if (flag){
            //
            //绑定当前页开始
            var options = $("#tb").bootstrapTable('getOptions') ;
            //得到当前页
            var pn = options.pageNumber ;
            $("input[name='pn']").val(pn) ;
            //序列化表单
            var formStr=$('#userform').serialize();
            //处理表单控件的中文乱码
         GuestsAdvisory = decodeURIComponent(formStr,true);
         alert(GuestsAdvisory)
            $.ajax({
                'type':'post',
                'url':'/Advisory/addGuestsAdvisory',
                'data':GuestsAdvisory,
                success:function(data){
                    //关闭对话框
                    $("#addmodal").modal('hide') ;
                    //重新加载表格
                    $("#tb").bootstrapTable('load',data) ;
                    //提示增加成功
                    swal("提示信息", "增加成功!", "success");
                }
            })
        }


    }
    //删除做完了
    function delRoom(id) {
        var ids = "" ;
        //1.得到要删除的行
        //返回所选的行，当没有选择任何行的时候返回一个空数组。
        var rows = $("#tb").bootstrapTable("getSelections") ;
        if (rows.length==0){
            alert("请选择要删除的数据！") ;
        }
        else{
            $.each(rows,function (index,row) {
                ids = ids + row.id + "-";

            }) ;
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                //得到当前页
                //绑定当前页开始
                //var options = $("#roominfotb").bootstrapTable('getOptions') ;
                //得到当前页
                //var pn = options.pageNumber ;
                $.post("/Advisory/delete",{'ids': ids},function(data){
                    //友好的提示
                    swal({title:"删除成功！",
                            text:"您已经永久删除了这条数据。",
                            type:"success"},
                        //刷新页面
                        function(){window.location=""});

                })

            });
        }
    }


    function xiala1() {
        var i = 0;
        //打开一个对话框
        $("#addmodal").modal("show");
        //当对话框加载完成后，绑定年有角色
                $.post('${pageContext.request.contextPath}/guests/query',function(data){
                    var s = "" ;
                    $.each(data,function (index,item) {
                        s = s + "<option value="+item.id+">"+item.name+"</option>";
                        console.log(item.name);
                    })
                    $("select[name='guests']").html(s) ;
                }) ;

    }

    //打开增加的对话框
    function toadd() {
        xiala1();
        $("#addmodal").modal("show");
        $('#date').datetimepicker({
           format: 'YYYY-MM-DD'
        });
    }
    //打开修改对话框,回传要修改行的数据
    function toxiugai(index) {
        //取消所有选择
        $("#tb").bootstrapTable("uncheckAll");
        //选中要修改的行
        $("#tb").bootstrapTable("check", index);

        //得到所选行的数据
        var row = $("#tb").bootstrapTable("getSelections")[0];
        //绑定主键
        $("input[name='id']").val(row.id);
        //绑定当前页开始
        var options = $("#tb").bootstrapTable('getOptions') ;
        //得到当前页
        var pn = options.pageNumber ;
        //绑定当前
        $("input[name='pn']").val(pn) ;
        $("input[name='guests']").val(row.guests1.name);
        $("input[name='date']").val(row.date);
        $("input[name='note']").val(row.note);


        //.打开对话框
        $("#toxiugaimodal").modal("show");
        // $('#date').datetimepicker2({
        //     format: 'YYYY-MM-DD'
        // });
    }
    function doxiugai(){
        //.
        var params = $("#userxiugaiform").serialize();
        //处理表单控件的中文乱码
        updateGuests = decodeURIComponent(params,true);
        alert(updateGuests)
        $.ajax({
            'type':'post',
            'url':'/Advisory/update',
            'data':updateGuests,
            success:function(data){
                //关闭对话框
                $("#toxiugaimodal").modal('hide') ;
                //友好的提示
                swal("提示信息", "修改成功!", "success");
                //重新加载表格
                $("#usertb").bootstrapTable('load',data) ;

            }
        })
    }
    // <!--时间日历-->
    // $('#datetimepicker1').datetimepicker({
    //     format: 'YYYY-MM-DD',
    //     locale: moment.locale('zh-cn')
    // });
    // <!--时间日历-->

</script>
<!--修改模态框-->
<div  class="modal inmodal" id="toxiugaimodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userxiugaiform"  method="post" role="form">

            <input type="hidden" name="id">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">用户修改</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right" for="guests">姓名</label>
                        <div class="col-sm-6" style="margin-left: -13px" >
                            <input type="text" class="form-control" name="guests"  placeholder="客户姓名" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="date" class="col-sm-4 text-right">日期</label>
                        <div class="input-group col-sm-6" id="datetimepicker2" >
                            <input name="date" id="date" type='date' class="form-control" />
                            <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>


                    <div class="form-group" >
                        <label for="note" class="col-sm-4 text-right">询问内容</label>
                        <div class="col-sm-6" style="margin-left: -14px">
                            <input type="text" class="form-control" name="note"  />
                        </div>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button onclick="doxiugai()" type="button" class="btn btn-primary">修改</button>
                </div>

